{% extends '../_manage.html' %}

{% block title %} {{ _('All Users') }} {% endblock %}

{% block head %}
<script>
var g_currentTime = {{ currentTime }};

$(function() {
    getJSON('/api/users', {
        page: {{ pageIndex }}
    }, function (err, data) {
        if (err) {
            return fatal(err);
        }
        initVM(data);
    });
});

function initVM(data) {
    var vm = new Vue({
        el: '#vm',
        data: {
            users: data.users,
            page: data.page,
            days: 1
        },
        methods: {
            getRoleName: function (u) {
                return {
                    '0': 'admin',
                    '10': 'editor',
                    '100': 'contributor',
                    '10000': 'subscriber'
                }[String(u.role)] || 'unknown';
            },
            isLocked: function (u) {
                return u.locked_until > g_currentTime;
            },
            getLockTime: function (u) {
                var t = u.locked_until - g_currentTime;
                console.log('t >>> ' + t);
                if (t < 3600000) {
                    return 'Less in 1 hour';
                }
                if (t < 86400000) {
                    return 'in ' + parseInt(t / 3600000, 10) + ' hours';
                }
                if (t > 3000000000000) {
                    return 'forever';
                }
                if (t > 31536000000) {
                    var y = parseInt(t / 31536000000, 10);
                    var m = parseInt((t - 31536000000 * y) / 2592000000, 10);
                    var s = 'in ' + y + ' years';
                    if (m > 0) {
                        s = s + ' ' + m + ' months';
                    }
                    return s;
                }
                return 'in ' + parseInt(t / 86400000, 10) + ' days';
            },
            lockUser: function (u) {
                if (confirm('Do you want to lock user \"' + u.name + '\" for ' + $('option[value=' + this.days + ']').text() + '?')) {
                    postJSON('/api/users/' + u.id + '/lock', {
                        locked_until: this.days * 3600000 * 24 + g_currentTime
                    }, function(err, r) {
                        if (err) {
                            return error(err);
                        }
                        refresh();
                    });
                }
            },
            unlockUser: function (u) {
                if (confirm('Do you want to unlock user \"' + u.name + '\"?')) {
                    postJSON('/api/users/' + u.id + '/lock', {
                        locked_until: 0
                    }, function(err, r) {
                        if (err) {
                            return error(err);
                        }
                        refresh();
                    });
                }
            }
        }
    });
    $('#loading').hide();
    $('#vm').show();
}
</script>
{% endblock %}

{% block main %}

    <div id="loading" class="uk-width-1-1">
        <i class="uk-icon-spinner uk-icon-spin"></i> Loading...
    </div>

    <div id="error" class="uk-width-1-1">
    </div>

    <div id="vm" class="uk-width-1-1">

        <h3>All Users</h3>

        <div class="uk-margin uk-clearfix">
            <a href="javascript:refresh()" class="uk-button"><i class="uk-icon-refresh"></i> {{ _('Refresh') }}</a>
            <a href="create_user" class="uk-button uk-button-primary"><i class="uk-icon-plus"></i> {{ _('New User') }}</a>
            <select id="days" v-model="days" class="uk-float-right">
                <option value="1">1 day</option>
                <option value="2">2 days</option>
                <option value="3">3 days</option>
                <option value="7">1 week</option>
                <option value="14">2 weeks</option>
                <option value="30">1 month</option>
                <option value="60">2 months</option>
                <option value="90">3 months</option>
                <option value="180">6 months</option>
                <option value="365">1 year</option>
                <option value="40000">forever</option>
            </select>
        </div>

        <table class="uk-table uk-table-hover">
            <thead>
                <tr>
                    <th width="10%">{{ _('Name') }}</th>
                    <th width="15%">{{ _('Name') }}</th>
                    <th width="45%">{{ _('Email') }}</th>
                    <th width="15%">{{ _('Created At') }}</th>
                    <th width="15%">{{ _('Lock') }}</th>
                </tr>
            </thead>
            <tbody>
                <tr v-repeat="u: users">
                    <td>
                        <a v-attr="href: '/user/'+u.id" target="_blank"><img v-attr="src: u.image_url" class="uk-comment-avatar uk-border-circle x-avatar" style="width:50px;height:50px;"></a>
                    </td>
                    <td>
                        <a v-attr="href: '/user/'+u.id" target="_blank"><span v-text="u.name"></span></a>
                        <br>
                        <span v-text="getRoleName(u)"></span>
                    </td>
                    <td><span v-text="u.email"></span></td>
                    <td><span v-text="u.created_at.toDateTime()"></span></td>
                    <td>
                        <a v-if="! isLocked(u)" v-on="click: lockUser(u)" title="Lock User" href="#0" class="x-btn"><i class="uk-icon-ban"></i></a>
                        <a href="#0" v-if="isLocked(u)" v-on="click: unlockUser(u)"><i class="uk-icon-circle-o"></i></a>
                        <span v-if="isLocked(u)" v-text="getLockTime(u)"></span>
                    </td>
                </tr>
            </tbody>
        </table>

        <div v-component="pagination" v-with="page"></div>
    </div>

{% endblock%}
